<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable ref="proTable" :columns="columns" :request-api="getTableColums">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="Download" @click="downloadFile">导出用户数据</el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>
<script setup lang="tsx" name="useTreeFilter">
import { ref, reactive } from "vue";
import { useDownload } from "@/hooks/useDownload";
import { Column } from "@/api/interface/userList";
import { ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Download } from "@element-plus/icons-vue";
import { getTableColums } from "@/api/modules/userList";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive<ColumnProps<Column.ResColumnList>[]>([
  { prop: "userId", label: "用户ID" },
  {
    prop: "avatar",
    label: "用户头像",
    render: scope => {
      return (
        <el-image
          src={scope.row[scope.column.property]}
          style="width: 60px; height: 60px; border-radius: 4px;"
          preview-src-list={[scope.row[scope.column.property]]}
          preview-teleported={true}
        />
      );
    }
  },
  { prop: "name", label: "用户姓名", search: { el: "input" } },
  { prop: "companyName", label: "公司名称", search: { el: "input" } },
  { prop: "phone", label: "手机号" },
  { prop: "position", label: "职位" },
  { prop: "gender", label: "性别" },
  { prop: "createTime", label: "创建时间" }
]);
const downloadFile = async () => {
  let obj = {
    ...proTable.value?.searchParam,
    pageNum: 1,
    pageSize: proTable.value?.pageable.total
  };
  console.log(obj);
  let data = await getTableColums(obj);
  const tableData = data.list || [];
  const exportColumns = columns
    .filter((col): col is { prop: string; label: string } => !!col.prop && !!col.label)
    .map(col => ({ prop: col.prop, label: col.label }));

  ElMessageBox.confirm("确认导出用户列表数据？", "温馨提示", { type: "warning" }).then(() =>
    useDownload(tableData, "用户列表", exportColumns)
  );
};
</script>
